<template>
  <li :class="{active: !todo.done}">
    <label>
      <!--checked动态绑定todo的done属性，判断事情是否完成（完成打钩） -->
      <input type="checkbox" :checked="todo.done" @click="handleTodo(todo.id)"/>
      <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
  </li>
</template>

<script>
export default {
  name: "MyItem",
  props:['todo','checkTodo','deleteTodo'],
  methods:{
    handleTodo(id){
      this.checkTodo(id);
    },
    handleDelete(id){
      this.deleteTodo(id);
    }
  }
}
</script>

<style scoped>
li{
  width: 100%;
 

  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
  color: #67c23a;
  background-color: #f0f9eb;

}
li.active {
  color: #e6a23c;
  background-color: #fdf6ec;
}
li label{
  float: left;
  cursor:pointer;
}
li label li input{
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  transition: all 0.3s;
  top: -1px;
}
li button{
  float: right;
  margin-top: 3px;
  transform: translateX(80px);
}
li:before{
  content: initial;
}
li:last-child{
  border-bottom: none;
}
li span {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
li:hover button{
  transform: translateX(-14px);
}
</style>